<template>
  <ul class="nav-sections">
    <li class="section-link-li" v-for="node in value" :key="node.id">
      <router-link class="section-link-a"
                   tag="a"
                   :to="node.path"
                   :class="{'active':clickSection===node.id||hoverSection===node.id}"
                   @click.native="goTo(node.id)"
                   @mouseenter.native="hoverSection=node.id"
                   @mouseout.native="hoverSection=''"
      >{{ node.name }}
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'NavSimple',
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {
    '$route': {
      handler (to, from) {
        this.clickSection = ''
        this.value.some(nav => {
          if (nav.routeName === to.name) {
            this.clickSection = nav.id
            return true
          }
        })
      },
      immediate: true
    },
  },

  data: () => ({
    clickSection: '',
    hoverSection: ''
  }),
  created () {
    let initSectionName = this.$route.name
    this.value.some(nav => {
      if (nav.routeName === initSectionName) {
        this.clickSection = nav.id
        return true
      }
    })
  },
  methods: {
    goTo (section) {
      this.clickSection = section
    }
  }
}
</script>

<style>
.nav-sections {
  height: 200px;
  font-weight: 600;
}

.section-link-li {
  margin-bottom: 10px;
}

.section-link-a {
  display: inline-block;
  position: relative;
  height: 38px;
  line-height: 38px;
  color: rgba(0, 0, 0, .7);
  font-size: 18px;
}

.section-link-a.active {
  cursor: pointer;
  color: #a175ed;
}

.section-link-a:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 5px;
  left: 0;
  right: 0;
  background-color: #a175ed;
  transform: scaleX(0);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.section-link-a.active:after {
  transform: scaleX(1);
}
</style>
